<script>
import { getMenuItems } from './menus.js';
import TabSwitching from '@/components/TabSwitching/TabSwitching.vue';
export default {
    name: 'LuminousBorder',
    components: { TabSwitching },
    data() {
        return {
            menuItems: getMenuItems()
        };
    }
};
</script>

<template>
    <div class="luminous-box">
        <!--选项卡切换-->
        <TabSwitching :data="menuItems" :account="1" />
        <!--流光边框-->
        <div class="card">434324324</div>
    </div>
</template>

<style scoped lang="scss">
.luminous-box {
    background-color: black;
    height: 100vh;
    .card {
        z-index: 0;
        width: 400px;
        height: 300px;
        margin: 20px;
        border-radius: 10px;
        overflow: hidden;
        padding: 2rem;
        position: relative;
        color: #fff;
        &::before {
            content: '';
            position: absolute;
            z-index: -2;
            left: -50%;
            top: -50%;
            width: 200%;
            height: 200%;
            background-color: #1a232a;
            background-repeat: no-repeat;
            background-position: 0 0;
            background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
            animation: rotateGlow 4s linear infinite;
        }

        &::after {
            content: '';
            position: absolute;
            z-index: -1;
            left: 6px;
            top: 6px;
            width: calc(100% - 12px);
            height: calc(100% - 12px);
            background: #000;
            border-radius: 5px;
        }
    }
}
@keyframes rotateGlow {
    100% {
        transform: rotate(1turn);
    }
}
</style>
